<template>
  <view>
    <view v-for="(item, index) in list" :key="index">
      <view
        @click="listClick(index)"
        class="basics-form-item"
        :class="[item.rightArrow ? 'right-arrow' : '']"
        v-if="!item.hidden"
      >
        <text class="left" v-if="!hiddenTitle">
          <text
            :class="[`iconfont icon-${item.icon}`]"
            v-if="item.icon"
            style="margin-right: 10rpx"
          />
          {{ item.title }}
        </text>
        <text
          :style="item.value ? `width:` + (item.width || width) : ''"
          :class="[item.value ? '' : 'placeholder']"
          >{{ item.value || item.placeholder }}</text
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    originalList: {
      type: Array,
      default: () => [],
    },
    width: {
      type: String,
      default: "70vw",
    },
    hiddenTitle: {
      //隐藏标题模式
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: [],
    };
  },
  created(options) {
    if (this.originalList.length) {
      this.initList(this.originalList);
    }
  },
  methods: {
    initList(list) {
      this.list = list;
    },
    listClick(index) {
      this.$emit("listClick", index);
    },
  },
};
</script>
<style lang="scss" scoped>
.left {
  color: $font-grey-color;
}
text:nth-child(2) {
  text-align: right;
}
</style>
